<script setup>
const props = defineProps({
  direction: {
    type: String,
    default: 'down',
  },
  size: {
    type: String,
    default: '1.2em',
  },
  color: {
    type: String,
    default: '#000000',
  },
})

const directionClass = computed(() => {
  if (props.direction === 'down') return ''
  if (props.direction === 'up') return 'rotate-180'
  if (props.direction === 'left') return 'rotate-90'
  if (props.direction === 'right') return '-rotate-90'
})
</script>

<template>
  <div :class="`${directionClass}`">
    <svg
      rpl=""
      class="ml-xs"
      fill="currentColor"
      height="20"
      icon-name="caret-down-outline"
      viewBox="0 0 20 20"
      width="20"
      xmlns="http://www.w3.org/2000/svg">
      <!--?lit$998170163$--><!--?lit$998170163$-->
      <path
        d="M10 13.125a.624.624 0 0 1-.442-.183l-5-5 .884-.884L10 11.616l4.558-4.558.884.884-5 5a.624.624 0 0 1-.442.183Z"></path>
      <!--?-->
    </svg>
  </div>
</template>
